<template>
  <div class="oBox" :id="uid" :style="style"></div>
</template>

<script setup>
import * as echarts from "echarts";

let uid = ref(null);
onBeforeMount(() => {
  uid.value = `echarts-uid-${parseInt(Math.random() * 1000000)}`;
});

onMounted(() => {
  let myChart = echarts.init(document.getElementById(uid.value));
  myChart.setOption(props.myOption, {
    notMerge: true, //不和之前的option合并
  });

  // 监听页面的大小
  window.addEventListener("resize", () => {
    myChart.resize();
  });
});

const props = defineProps({
  style: {
    type: Object,
    default: () => ({
      width: "100%",
      height: "100%",
    }),
  },
  myOption: {
    type: Object,
    default: () => ({}),
  },
});
</script>
